<!--
properties:
  @prop  dataList         数据，Array
  @prop  tableTitle       表格标题，String
  @prop  columns          表格列定义{prop, label, width, filters, filterMethod, filterPlacement}
  @prop  searchHint       搜索框提示，String
  @prop  searchProps      用于搜索的属性名，Array
  @prop  canAdd           是否具有新增按钮，Boolean
event:
  @event  onAdd           新增事件，undefined
slot:
  @slot  operationColumns 操作列
-->
<template>
  <Table
    ref="table"
    :title="tableTitle"
    :searchHint="searchHint"
    :pageData="tablePageData"
    :canAdd="canAdd"
    @onAdd="handleAdd"
    @search="search"
    @sizeChange="pageSizeChange"
    @pageTurning="pageTurning"
    @filterChange="filterChange"
    @sortChange="sortChange">
    <!--中间列-->
    <el-table-column v-for="col of columns"
                     align="center"
                     :key="col.prop"
                     :column-key="col.columnKey"
                     :prop="col.prop"
                     :label="col.label"
                     :width="col.width"
                     :sortable="col.sortable"
                     :filters="col.filters"
                     :filter-placement="col.filterPlacement">
    </el-table-column>
    <!--可以添加默认列-->
    <slot></slot>
  </Table>
</template>

<script>
  import Table from "../../components/content/bridge/Table.vue"
  import {ASCENDING, DESCENDING} from "../../assets/js/enum/SortType";

  export default {
    name:"PaginationTable",
    props:{
      dataList:{
        type: Array | Set,
        required:true
      },
      tableTitle:{
        type: String,
        required:true
      },
      searchHint:{
        type: String,
        required:true
      },
      searchProps: {
        type: Array,
        required:true
      },
      columns:{
        type: Array,
        required:true
      },
      canAdd:{
        type: Boolean,
        default:false
      }
    },
    data() {
      return {
        pageData:{
          pageSize:10,
          currentPage:1
        },

        //搜索的字符串
        searchStr: "",

        //排序类型
        sortProp:{
          prop:"",
          order:ASCENDING
        },

        //筛选条件
        filters:{prop:"", values:[]}
      }
    },
    computed: {
      /* 前端分页 */
      tablePageData() {
        let result = {
          pageSize: this.pageData.pageSize,
          currentPage: this.pageData.currentPage,
        };
        let filterData = [];
        //筛选搜索框
        filterData = [...this.dataList].filter(item =>this.searchStr.split(" ").every(str=>this.searchProps.some(prop=>item[prop].includes(str))));
        //筛选条件
        if(!!this.filters.prop && this.filters.values.length > 0) {
          filterData = filterData.filter(item=>this.filters.values.includes(item[this.filters.prop]));
        }
        //排序
        if(!!this.sortProp.prop) {
          if (this.sortProp.order === DESCENDING) {
            Array.sort(filterData, (data1, data2) => data2[this.sortProp.prop] - data1[this.sortProp.prop]);
          } else {
            Array.sort(filterData, (data1, data2) => data1[this.sortProp.prop] - data2[this.sortProp.prop]);
          }
        }
        //分页
        result.total = filterData.length;
        result.data = filterData.slice(
          (result.currentPage - 1) * result.pageSize,
          (result.currentPage) * result.pageSize
        );
        //返回结果
        return result;
      }
    },
    methods:{
      /* 查找 */
      search(searchStr) {
        this.searchStr = searchStr;
      },

      /* 页面尺寸变化事件 */
      pageSizeChange(newSize) {
        this.pageData.pageSize = newSize;
      },

      /* 当前页调整事件 */
      pageTurning(curPage) {
        this.pageData.currentPage = curPage;
      },

      /* 排序变化事件 */
      sortChange({column, prop, order}) {
        this.sortProp = {column, prop, order};
      },

      /* 筛选事件 */
      filterChange(filters) {
        this.filters = filters;
      },

      /*  添加事件 */
      handleAdd() {
        this.$emit("onAdd");
      }
    },
    components:{Table}
  }
</script>



// WEBPACK FOOTER //
// PaginationTable.vue?6e1fd29c
